<template>
  <view class="notice-detail-container">
    <!-- 标题部分 -->
    <view class="notice-header">
      <text class="notice-title">{{noticeDetail.title}}</text>
      <view class="notice-meta">
        <text class="meta-text">发布时间: {{noticeDetail.publishTime}}</text>
        <text class="meta-text">浏览: {{noticeDetail.viewCount}}</text>
      </view>
    </view>
    
    <!-- 内容部分 -->
    <scroll-view scroll-y class="notice-content">
      <rich-text :nodes="noticeDetail.content"></rich-text>
    </scroll-view>
    
    <!-- 底部操作栏 -->
    <view class="notice-footer">
      <button class="footer-btn" @click="shareNotice">分享</button>
      <button class="footer-btn" @click="collectNotice" :class="{collected: isCollected}">
        {{isCollected ? '已收藏' : '收藏'}}
      </button>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        noticeId: '',
        noticeDetail: {
          title: '',
          publishTime: '',
          viewCount: 0,
          content: ''
        },
        isCollected: false
      }
    },
    onLoad(options) {
      this.noticeId = options.id
      this.getNoticeDetail()
      this.checkCollectedStatus()
    },
    methods: {
      // 获取公告详情
      async getNoticeDetail() {
        uni.showLoading({
          title: '加载中...'
        })
        
        try {
          // 这里应该是API请求，模拟数据
          const res = await this.mockApiGetNoticeDetail()
          this.noticeDetail = res.data
          
          // 更新浏览量
          this.noticeDetail.viewCount++
        } catch (error) {
          console.error('获取公告详情失败:', error)
          uni.showToast({
            title: '加载失败',
            icon: 'none'
          })
        } finally {
          uni.hideLoading()
        }
      },
      
      // 模拟API请求
      mockApiGetNoticeDetail() {
        return new Promise(resolve => {
          setTimeout(() => {
            resolve({
              data: {
                title: `关于开展${this.noticeId}月份主题党日活动的通知`,
                publishTime: '2023-06-15',
                viewCount: 128,
                content: `
                  <div style="font-size: 16px; line-height: 1.8;">
                    <h3>关于开展主题党日活动的通知</h3>
                    <p>各党支部：</p>
                    <p>为深入学习贯彻党的二十大精神，进一步加强基层党组织建设，经研究决定，在全体党员中开展主题党日活动。现将有关事项通知如下：</p>
                    <p><strong>一、活动主题</strong></p>
                    <p>学习贯彻二十大精神，争做新时代合格党员</p>
                    <p><strong>二、活动时间</strong></p>
                    <p>2023年6月20日（周二）下午14:00</p>
                    <p><strong>三、活动地点</strong></p>
                    <p>5G高新视频党建教育基地多媒体教室</p>
                    <p><strong>四、参加人员</strong></p>
                    <p>全体党员、预备党员、入党积极分子</p>
                    <p><strong>五、活动内容</strong></p>
                    <ol>
                      <li>集中学习党的二十大精神</li>
                      <li>观看党建教育专题片</li>
                      <li>分组讨论交流</li>
                      <li>重温入党誓词</li>
                    </ol>
                    <p><strong>六、相关要求</strong></p>
                    <p>1. 请各党支部高度重视，认真组织，确保全员参与。</p>
                    <p>2. 活动期间请佩戴党徽，携带学习笔记本。</p>
                    <p>3. 各党支部于6月25日前将活动开展情况报党委办公室。</p>
                    <p>特此通知。</p>
                    <p style="text-align: right;">党委办公室</p>
                    <p style="text-align: right;">2023年6月15日</p>
                  </div>
                `
              }
            })
          }, 500)
        })
      },
      
      // 检查收藏状态
      checkCollectedStatus() {
        // 这里应该是从本地存储或API获取收藏状态
        const collectedNotices = uni.getStorageSync('collectedNotices') || []
        this.isCollected = collectedNotices.includes(this.noticeId)
      },
      
      // 收藏公告
      collectNotice() {
        let collectedNotices = uni.getStorageSync('collectedNotices') || []
        
        if (this.isCollected) {
          // 取消收藏
          collectedNotices = collectedNotices.filter(id => id !== this.noticeId)
          uni.showToast({
            title: '已取消收藏',
            icon: 'none'
          })
        } else {
          // 添加收藏
          collectedNotices.push(this.noticeId)
          uni.showToast({
            title: '收藏成功',
            icon: 'success'
          })
        }
        
        uni.setStorageSync('collectedNotices', collectedNotices)
        this.isCollected = !this.isCollected
      },
      
      // 分享公告
      shareNotice() {
        uni.share({
          title: this.noticeDetail.title,
          path: `/pages/notice/detail?id=${this.noticeId}`,
          success: () => {
            uni.showToast({
              title: '分享成功',
              icon: 'success'
            })
          },
          fail: () => {
            uni.showToast({
              title: '分享失败',
              icon: 'none'
            })
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  .notice-detail-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #f5f5f5;
  }
  
  .notice-header {
    background-color: #fff;
    padding: 30rpx;
    border-bottom: 1rpx solid #eee;
  }
  
  .notice-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    line-height: 1.5;
    margin-bottom: 20rpx;
  }
  
  .notice-meta {
    display: flex;
    justify-content: space-between;
  }
  
  .meta-text {
    font-size: 24rpx;
    color: #999;
  }
  
  .notice-content {
    flex: 1;
    padding: 30rpx;
    background-color: #fff;
    margin: 20rpx;
    border-radius: 12rpx;
    box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
	box-sizing: border-box;
  }
  
  .notice-footer {
    display: flex;
    padding: 20rpx;
    background-color: #fff;
    border-top: 1rpx solid #eee;
  }
  
  .footer-btn {
    flex: 1;
    margin: 0 10rpx;
    font-size: 28rpx;
    color: #333;
    background-color: #f5f5f5;
    border: none;
    border-radius: 50rpx;
    
    &::after {
      border: none;
    }
    
    &.collected {
      color: #fff;
      background-color: #f56c6c;
    }
  }
</style>